<template>
	<div class="dd">
		<header>
			<button @click="go(-1)">
				<i class="el-icon-arrow-left"></i>
			</button>
			<h3>订单</h3>
			<i class="el-icon-location-outline" style="margin-left: 0.3rem;"></i>
		</header>
		
		<table class="tab" cellspacing="1" cellpadding="0" border="0">
			<tr>
				<th>订单号</th>
				<th>收货人</th>
				<th>电话号码</th>
				<th>总价</th>
				<th>付款</th>
			</tr>
			<tr v-for="item in list" v-if="item.payStatus == 0">
				<td>{{item.ordid}}</td>
				<td>{{item.ship2name}}</td>
				<td>{{item.ship2phone}}</td>
				<td>{{item.amount}}</td>
				<td>
					<button @click="addPay(item.amount,item.ordid)">点击付款</button>
				</td>
			</tr>
		</table>
	</div>
</template>

<script>
	export default{
		name : 'MobileDd',
		data() {
			return{
				list:[],
			}
		},
		methods:{
			go(i){
				this.$router.go(i);
			},
			addPay(i,z){
				let token = localStorage.getItem('token');
				token = "Bearer " + token;
				let h = {
					headers: {
						'Authorization': token,}}
				let x = confirm('支付金额￥' + i + ',是否支付？')
				    if(x == true){
						this.$postk('/api/fore/ord/addPay/'+z,null,h).then((rsp)=>{
							let fd = new FormData();
							fd.append('days',7);
							this.$postk('/api/fore/ord/findPageOrders/1/5',fd,h).then((resp)=>{
								this.list = resp.data.data.orders;
							})
						})
				        alert('支付成功');
				        this.$emit('no')
				    }else {
				        alert('支付失败');
				    }
			}
		},
		created() {
			let token = localStorage.getItem('token');
			token = "Bearer " + token;
			let h = {
				headers: {
					'Authorization': token,}}
			let fd = new FormData();
			fd.append('days',7);
			this.$postk('/api/fore/ord/findPageOrders/1/5',fd,h).then((resp)=>{
				this.list = resp.data.data.orders;
			})
		}
	}
</script>

<style scoped>
	.dd{
		background-color: #f5d5a0;
		width: 100%;
		height: 100%;
		position: fixed;
		background-size: 100% 100%;
	}
	.dd  header{
		display: flex;
		justify-content: center;
		align-items: center;
		padding-top: 1rem;
		margin-bottom: 1rem;
	}
	.dd header button{
		border: none;
		background-color: #f5d5a0;
		position: absolute;
		top: 1;
		left: 0;
	}
	/* /deep/ .el-input__inner{
		border-radius: 5rem;
		caret-color: #f5d5a0;
		outline: none;
		border: none;
	} */
	.dd ul{
		width: 95%;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
	}
	
	.sp{
		width: 95%;
		margin: 0 auto;
		border: 1px solid ;
		margin-top: 1rem;
		height: 12rem;
	}
	
	.sp .nr{
		display: flex;
		margin-top: 1rem;
	}
	.fm{
		width: 30%;
		display: flex;
		justify-content: center;
		overflow: hidden;
		margin-left: 0.6rem;
		margin-bottom: 0.5rem;
		background-color: white;
		text-align: center;
		position: relative;
		border-radius: 0 0 0.6rem 0.6rem;
	}
	.sp .nr .fm img{
		width: 90%;
		height: 9rem;
	}
	.footer{
		margin-top: 1.5rem;
	}
	.footer span{
		margin-left: 2rem;
	}
	
	.btn button{
		margin-left: 1rem;
		margin-top: 1rem;
		height: 2rem;
		border: 1px solid red;
		border-radius: 5rem;
		background-color: white;
		color: red;
	}
	.tab {
		background-color: #ebebec;
		margin: 30px auto;
		width: 70%;
		height: 400px;
		text-align: center;
	}
	
	.tab td,
	th {
		background: #FFF;
	}
</style>